.logo_grid {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(3, calc(33.333% - 10px));
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  margin: $base-spacing auto;
  max-width: 1080px;

  @include breakpoint(tiny) {
    grid-template-columns: repeat(4, calc(25% - 10px));
  }

  @include breakpoint(tablet) {
    grid-template-columns: repeat(5, calc(20% - 10px));
    margin-top: 50px;
  }

  &-item {
    p {
      font-family: $code;
      font-size: 0.75em;
      margin: 0;
      text-align: center;

      .logo_grid--dark & { color: $white; }
    }

    img {
      filter: grayscale(100%);
      margin: 0 auto;
      max-height: 100px;
      max-width: 100%;
      transition: filter 0.2s ease-in-out;

      &:hover {
        filter: grayscale(0%);
      }
    }
  }

}
